<template lang="pug">
div
  nav-div
  .flex.jsb.ae
    .flex.js.ae
      h1.ui.header(style="margin: 0 15px 0 0; padding: 0;") {{report.name}}
      h2.ui.header(style="margin: 0 15px 0 0; padding: 0;") {{report.id}}
      h3.ui.header(style="margin: 0 15px 0 0; padding: 0;") {{report.category | reportCategory}}
    .flex.je.ae
      a.ui.button(v-if="['view'].includes(mode)", v-link="{ name: 'user', params: { id: report.user_id } }", target="_blank") 查看用户
      a.ui.button(v-if="['view'].includes(mode)", v-link="{ name: 'reports', query: { user_id: report.user_id } }", target="_blank") 全部验光报告
      .ui.button(v-if="['view'].includes(mode)", @click="mode = 'edit'") 编辑
      .ui.button(v-if="['edit'].includes(mode)", @click="save") 保存
      .ui.button.negative(v-if="['edit'].includes(mode)", @click="cancel") 取消
  //- .ui.grid.middle.aligned
  //-   .two.wide.column
  //-     h1.ui.header 掏摸
  //-   .one.wide.column
  //-     p 071416346
  //-   .five.wide.column.right.aligned
  //-     .ui.button(v-if="['view'].includes(mode)", @click="mode = 'edit'") 修改
  //-   .five.wide.column.right.aligned
  //-     .ui.button(v-if="['edit'].includes(mode)", @click="save") 保存
  //-   .three.wide.column
  //-     a.ui.button(v-if="['view'].includes(mode)") 全部验光报告
  //-     .ui.button.negative(v-if="['edit'].includes(mode)", @click="cancel") 取消
    //- .three.wide.column
    //-   .ui.button 上传处方照片
  .ui.divider
  view(
    v-if="['view'].includes(mode)",
    :report="report",
  )
  //- edit(
  //-   v-if="['view'].includes(mode)",
  //-   :report="report",
  //- )
  edit(
    v-if="['edit'].includes(mode)",
    :report.sync="report",
  )
</template>

<script>
import { getReport, updateReport } from '../../vuex/action'
import NavDiv from '../../modules/nav'
import View from './view'
import Edit from './edit'

export default {
  name: 'report',
  components: {
    View,
    Edit,
    NavDiv,
  },
  vuex: {
    getters: {
      reportSource: ({ report }) => report.report,
    },
    actions: {
      getReport,
      updateReport,
    }
  },
  data() {
    return {
      report: null,
      mode: 'view',
      tpl: {
        user: {
          content: {
            '验光处方': {
              '球镜': {
                '右眼': null,
                '左眼': null,
              },
              '柱镜': {
                '右眼': null,
                '左眼': null,
              },
              '轴位': {
                '右眼': null,
                '左眼': null,
              },
              '矫正视力': {
                '右眼': null,
                '左眼': null,
              },
              '瞳距': null,
              'Add': null,
              '棱镜': null,
              '基底': null,
            },
          }
        },
        pq: {
          content: {
            '问诊': {
              '出生年月': null,
              '职业': null,
              '经常开车': null,
              '原镜使用时间': null,
              '原镜清晰度': null,
              '佩戴隐形眼镜': null,
              '相关病史': [],
              '用户陈述': null,
            },
            '手持电脑验光': {
              '球镜': {
                '右眼': null,
                '左眼': null,
              },
              '柱镜': {
                '右眼': null,
                '左眼': null,
              },
              '轴位': {
                '右眼': null,
                '左眼': null,
              },
            },
            '原镜测量': {
              '眼镜类型': null,
              '球镜': {
                '右眼': null,
                '左眼': null,
              },
              '柱镜': {
                '右眼': null,
                '左眼': null,
              },
              '轴位': {
                '右眼': null,
                '左眼': null,
              },
              '光学中心': null,
            },
            '视力和视功能检查': {
              '瞳距': null,
              '球镜': {
                '右眼': null,
                '左眼': null,
              },
              '柱镜': {
                '右眼': null,
                '左眼': null,
              },
              '轴位': {
                '右眼': null,
                '左眼': null,
              },
              '棱镜': {
                '右眼': null,
                '左眼': null,
              },
              '基底': {
                '右眼': null,
                '左眼': null,
              },
              'ADD': {
                '右眼': null,
                '左眼': null,
              },
              '矫正视力': {
                '右眼': null,
                '左眼': null,
              },
              '主视眼': null,
              'Worth 四点': null,
              '立体视检查': null,
              'Amsler 表': null,
            },
            '验光处方': {
              '远用处方': {
                '球镜': {
                  '右眼': null,
                  '左眼': null,
                },
                '柱镜': {
                  '右眼': null,
                  '左眼': null,
                },
                '轴位': {
                  '右眼': null,
                  '左眼': null,
                },
                '棱镜': {
                  '右眼': null,
                  '左眼': null,
                },
                '基底': {
                  '右眼': null,
                  '左眼': null,
                },
                '矫正视力': {
                  '右眼': null,
                  '左眼': null,
                },
                '瞳距': null,
              },
              '辅助处方': {
                '球镜': {
                  '右眼': null,
                  '左眼': null,
                },
                '柱镜': {
                  '右眼': null,
                  '左眼': null,
                },
                '轴位': {
                  '右眼': null,
                  '左眼': null,
                },
                '棱镜': {
                  '右眼': null,
                  '左眼': null,
                },
                '基底': {
                  '右眼': null,
                  '左眼': null,
                },
                '矫正视力': {
                  '右眼': null,
                  '左眼': null,
                },
                '瞳距': null,
              },
            },
            '验光师建议': {
              '复查日期': null,
              '双眼矫正视力': null,
              '建议交替佩戴': null,
            },
          }
        }
      },
    }
  },
  methods: {
    save() {
      catchError(async() => {
        let data = _.cloneDeep(this.report)
        await this.updateReport(data)
        await this.getReport(data.id)
        this.mode = 'view'
      }, '更新成功')
    },
    cancel() {
      this.mode = 'view'
      this.report = _.chain(this.reportSource)
        .cloneDeep()
        .defaultsDeep(this.tpl[this.reportSource.category])
        .value()
    },
  },
  route: {
    data({ to: { params: { id }, query: { mode } } }) {
      catchError(async() => {
        await this.getReport(id)
        if (mode) {
          this.mode = mode
        }
      })
    }
  },
  ready() {
    $(this.$el).find('.dropdown').dropdown({
        on: 'hover'
      })
      // $('.ui.sticky').sticky({
      //   context: '#left',
      // })
  },
  watch: {
    reportSource: {
      handler(val, old) {
        this.helper.title(`验光报告 ${val.id}`)
        this.report = _.chain(val)
          .cloneDeep()
          .defaultsDeep(this.tpl[val.category])
          .value()
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
